<template>
  <div>
    <el-card style="text-align: left" class="box-card">
      <el-form
        ref="params"
        :label-position="'left'"
        label-width="100px"
        :model="params"
        :inline="true"
        size="small"
      >
        <el-form-item class="w-32" label="订单编号">
          <el-input v-model="params.orderId"></el-input>
        </el-form-item>
        <el-form-item class="w-32" label="订单状态">
          <el-select
            style="width: 188px"
            v-model="params.status"
            placeholder="请选择"
          >
            <el-option v-for="item in orderStatus" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="w-32" label="付费状态">
          <el-select
            style="width: 188px"
            v-model="params.paymentStatus"
            placeholder="请选择"
          >
            <el-option label="未付" value="1"> </el-option>
            <el-option label="已付" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="w-32" label="发件人姓名">
          <el-input v-model="params.senderName"></el-input>
        </el-form-item>

        <el-form-item class="w-32" label="发件人电话">
          <el-input v-model="params.senderPhone"></el-input>
        </el-form-item>
        <el-form-item class="w-32" label="发件人地址">
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item class="w-32" label="收件人姓名">
          <el-input v-model="params.receiverName"></el-input>
        </el-form-item>
        <el-form-item class="w-32" label="收件人电话">
          <el-input v-model="params.receiverPhone"></el-input>
        </el-form-item>
        <el-form-item class="w-32" label="收件人地址">
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions1"
            @change="handleChange1"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <div>
        <el-button
          icon="el-icon-search"
          @click="getOrders()"
          type="primary"
          circle
        ></el-button>
        <el-button @click="resetForm('params')" style="width: 100px" size="small" class="ml-5"
          >重置</el-button
        >
      </div>
    </el-card>
    <el-divider> <b>订单列表</b> </el-divider>

    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="orderId" label="订单编号" width="150">
        </el-table-column>
        <el-table-column prop="province" label="运单编号"> </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="150"> </el-table-column>
        <el-table-column label="订单状态">
          <template scope="scope">
            <i v-if="scope.row.status == 1">待取件</i>
            <i v-else-if="scope.row.status == 2">网点自寄</i>
            <i v-else-if="scope.row.status == 3">已取件</i>
            <i v-else-if="scope.row.status == 4">网点入库,待发车</i>
            <i v-else-if="scope.row.status == 5">运输中</i>
            <i v-else-if="scope.row.status == 6">网点出库，待派送</i>
            <i v-else-if="scope.row.status == 7">派送中 </i>
            <i v-else-if="scope.row.status == 8">已签收</i>
            <i v-else-if="scope.row.status == 9">拒收</i>
            <i v-else-if="scope.row.status == 10">已取消</i>
          </template>
        </el-table-column>
        <el-table-column prop="senderName" label="发件人姓名" width="100">
        </el-table-column>
        <el-table-column prop="senderPhone" label="发件人电话" width="120">
        </el-table-column>
        <el-table-column prop="senderAddress" label="发件人地址" width="200">
          <template scope="scope"> 
              {{scope.row.senderProvinceId+" "+scope.row.senderCityId+" "+scope.row.senderCountyId+" "+scope.row.senderAddress}}
          </template>
        </el-table-column>
        <el-table-column prop="receiverName" label="收件人姓名" width="100">
        </el-table-column>
        <el-table-column prop="receiverPhone" label="收件人电话" width="120">
        </el-table-column>
        <el-table-column prop="receiverAddress" label="收件人地址" width="200">
          <template scope="scope"> 
            {{scope.row.receiverProvinceId+" "+scope.row.receiverCityId+" "+scope.row.receiverCountyId+" "+scope.row.receiverAddress}}
          </template>
        </el-table-column>
        <el-table-column prop="pickupType" label="取件类型">
          <template scope="s">
            {{ s.row.pickupType == 1 ? "网点自寄" : "上门取件" }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="付款类型">
          <template scope="s">
            {{ s.row.paymentMethod == 1 ? "预结" : "到付" }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentStatus" label="付费状态">
          <template scope="s">
            {{ s.row.paymentStatus == 1 ? "未付" : "已付" }}
          </template>
        </el-table-column>
        <el-table-column width="120px" fixed="right" label="操作">
          <template scope="s">
            <el-link @click="selOrderDetails(s.row)" :underline="false" type="primary"
            >查看详情</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.num"
      :page-sizes="[3, 5, 10]"
      :page-size="params.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
import { getOrders } from "@/api/zwj/orderApi";

export default {
  data() {
    return {
      params: {
        orderId: "",
        status: "",
        paymentStatus: "",
        senderName: "",
        senderPhone: "",
        receiverName: "",
        receiverPhone: "",
        senderProvinceId: "",
        senderCityId: "",
        senderCountyId: "",
        receiverProvinceId: "",
        receiverCityId: "",
        receiverCountyId: "",
        num: 1,
        size: 3,
      },
      total:0,
      options: regionData,
      selectedOptions: [],
      selectedOptions1: [],
      tableData: [],
      orderStatus:[
        {id:1,name:"待取件"},
        {id:3,name:"已取件"},
        {id:4,name:"带发车"},
        {id:5,name:"运输中"},
        {id:6,name:"待派送"},
        {id:7,name:"派送中"},
        {id:8,name:"已签收"},
        {id:9,name:"拒签"},
        {id:10,name:"已取消"}
        ],
    };
  },
  methods: {
    selOrderDetails(order) {
      this.$router.push({name:"orderdetails",params:{order:order}});
    },
    handleChange(value) {
      this.params.senderProvinceId = CodeToText[value[0]];
      this.params.senderCityId = CodeToText[value[1]];
      this.params.senderCountyId = CodeToText[value[2]];
    },
    handleChange1(value) {
      this.params.receiverProvinceId = CodeToText[value[0]];
      this.params.receiverCityId = CodeToText[value[1]];
      this.params.receiverCountyId = CodeToText[value[2]];
    },

    handleSizeChange(val){
      this.params.size=val;
      this.getOrders();
    }, 
    handleCurrentChange(val){
      this.params.num=val;
      this.getOrders();
    },
    getOrders() {
      getOrders(this.params, this.params.num, this.params.size).then((data) => {
        this.tableData = data.data.list;
        this.total=data.data.total
        console.log(this.tableData)
      });
    },
     resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
  created() {
    this.getOrders();
  },
};
</script>

<style>
.w-32 {
  width: 32%;
}
.w-33 {
  width: 33%;
}
.w-20 {
  width: 20%;
}
</style>